<!-- S search -->
<app-search-bar
  [submitLoading]="tableParams.loading"
  [searchOptions]="searchOptions"
  (onSearch)="queryData($event)"
  (onReset)="resetData($event)"
>
</app-search-bar>
<!-- E search -->

<nz-card class="m-t-2">
  <div class="operation-wrap p-b-10">
    <button nz-button nzType="primary" [nzLoading]="exportLoading" (click)="exportTable()">
      <i nz-icon nzType="download" nzTheme="outline"></i>
      导出
    </button>
  </div>

  <div class="table-wrap pagination-wrap-position">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1100px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableParams.loading"
      [nzData]="tableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableParams.total"
      [nzPageIndex]="tableParams.page"
      [nzPageSize]="tableParams.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="180px" nzLeft>订单号</th>
          <th nzAlign="center" nzWidth="250px">平台渠道</th>
          <th nzAlign="center" nzWidth="120px">用户ID</th>
          <th nzAlign="center" nzWidth="150px">品牌</th>
          <th nzAlign="center" nzWidth="150px">商品</th>
          <th nzAlign="center" nzWidth="120px">规格</th>
          <th nzAlign="center" nzWidth="120px">官方价</th>
          <th nzAlign="center" nzWidth="120px">优惠金额</th>
          <th nzAlign="center" nzWidth="120px">支付爱豆</th>
          <th nzAlign="center" nzWidth="120px">实收金额</th>
          <th nzAlign="center" nzWidth="170px">
            <span class="blue-color">下单时间</span> + <span class="red-color">付款时间</span>
          </th>
          <th nzAlign="center" nzWidth="150px">充值账号</th>
          <th nzAlign="center" nzWidth="150px">订单状态</th>
          <th nzAlign="center" nzWidth="250px" nzRight>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- 订单号 -->
          <td nzAlign="center" nzLeft>{{ data.orderNum || '-' }}</td>
          <!-- 平台渠道 -->
          <td nzAlign="center">
            <!-- 平台 & 身份 -->
            <div>
              <ng-container *ngIf="data.platform;else templatePlatform">
                <nz-tag [nzColor]="'blue'">
                  {{ dictFilter(data.platform, platformOptions) }}
                </nz-tag>
              </ng-container>
              <ng-template #templatePlatform>-</ng-template>

              <ng-container>
                <nz-tag [nzColor]="'#2db7f5'" *ngIf="data?.userType == 2">B端</nz-tag>
                <nz-tag [nzColor]="'#87d068'" *ngIf="data?.userType == 1">C端</nz-tag>
              </ng-container>
            </div>
            <!-- 推广渠道 cid -->
            <div class="p-t-5">
              <ng-container *ngFor="let extension of channelOptions">
                <nz-tag
                  *ngIf="extension.content == data.cid"
                  nzColor="success">
                  {{ extension.name }}
                </nz-tag>
              </ng-container>
            </div>
          </td>
          <!-- 用户ID -->
          <td nzAlign="center">{{ data.userId }}</td>
          <!-- 品牌 -->
          <td nzAlign="center">{{ data.goodsTypeName || '-' }}</td>
          <!-- 商品 -->
          <td nzAlign="center">{{ data.goodsName || '-' }}</td>
          <!-- 规格 -->
          <td nzAlign="center">{{ data.goodsSpec || '-' }}</td>
          <!-- 官方价 -->
          <td nzAlign="center">{{ data.goodsOriginalPrice || '-' }}</td>
          <!-- 优惠金额 -->
          <td nzAlign="center">{{ data.favorablePrice || '0' }}</td>
          <!-- 支付爱豆 -->
          <td nzAlign="center">{{ data.aiDouAmount || '0' }}</td>
          <!-- 实收金额 -->
          <td nzAlign="center">{{ data.realPrice || '0' }}</td>
          <!-- 下单时间+付款时间 -->
          <td nzAlign="center">
            <p class="blue-color">{{ data.createTime || '-' }}</p>
            <p class="red-color">{{ data.payTime || '-' }}</p>
          </td>
          <!-- 充值账号 -->
          <td nzAlign="center">{{ data.rechargeNumber || '-' }}</td>
          <!-- 订单状态 -->
          <td nzAlign="center">
            <span [ngStyle]="{'color': data.status | rechargeOrderState: 'colour'}">
              {{ data.status | rechargeOrderState: 'label' }}
            </span>
          </td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button nz-button nzType="link" class="m-r-8" (click)="reviewDetail(data)">查看</button>
            <button nz-button nzType="link" (click)="followModal(data)">跟进</button>
            <a
              *ngIf="[0].includes(data?.status)"
              nz-button
              nzType="link"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认取消订单?"
              (nzOnConfirm)="cancelOrder(data)">
              取消订单
            </a>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template>
  </div>
</nz-card>

<!-- 跟进 -->
<recharge-follow-up #rechargeFollowRef [initParams]="followParams" (deterMine)="loadTable()"></recharge-follow-up>